<template>
    <div class="items">
        <div class="item" v-for="(item, index) in needinfos" :key="index">
            <div class="word">{{ item }}:</div>
            <input v-model="info[index]" type="number" v-if="index == 1 || index == 2 || index == 4">
            <input type="text" v-model="info[index]" v-else>
        </div>
        <div class="btns">
            <router-link to="/start">
                <a-button type="primary" danger class="btn">返回</a-button>
            </router-link>

            <a-button class="btn" @click="ok">确定</a-button>
        </div>
    </div>
</template>

<script setup>
import api from '@/api/user'
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router';
import { message } from 'ant-design-vue';

const router = useRouter();
const hasinfo = ref(0);
const info = ref([]);

const ok = () => {
    // Check if any field in info is empty
    if (info.value.some(field => field === undefined || field === "")) {
        message.info("表格不能为空");
        return;
    }

    let data = {
        "name": info.value[0],
        "sex": info.value[1],
        "age": info.value[2],
        "hobby": info.value[3],
        "duration": info.value[6],
        "ageConfirm": info.value[4],
        "diagnosisLevelOfAutism": info.value[5],
        "parentsName": info.value[7],
        "parentsPhone": info.value[8]
    }

    console.log(data);
    if(hasinfo.value){
        putinfo(data);
    }else{
        addinfo(data);
    }
    // Add your API call or further processing here
}
const putinfo=(data)=>{
api.putinfo(data).then((res)=>{
    router.push('/start')
    console.log(res);
})
}
const addinfo=(data)=>{
api.addinfo(data).then((res)=>{
    router.push('/start')
    console.log(res);
})
}
onMounted(() => {
    api.getinfo().then((res) => {
        console.log(res.data);
        if (res.data.name == null) {
            hasinfo.value = 0;
        } else {
            hasinfo.value = 1;
            info.value[0] = res.data.name;
            info.value[1] = res.data.sex;
            info.value[2] = res.data.age;
            info.value[3] = res.data.hobby;
            info.value[4] = res.data.ageConfirm;
            info.value[5] = res.data.diagnosisLevelOfAutism;
            info.value[6] = res.data.duration;
            info.value[7] = res.data.parentsName;
            info.value[8] = res.data.parentsPhone;
        }
    })
})

const needinfos = ref(["姓名", "性别(男为1女为0)", "年龄", "孩子喜好", "确诊自闭症年龄", "自闭症确诊程度", "康复时长", "家长姓名", "家长电话"]);
</script>

<style lang="scss" scoped>
.items {
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    background-image: url('@/static/back.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    gap: 2rem;
    overflow: hidden;
    overflow-y: auto;
    padding: 3rem;

    .item {
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 3rem;
        gap: 2rem;

        .word {
            border: #fb5e2f solid 1rem;
            border-radius: 2rem;
            color: #fc6845;
            background-color: #fee2b3;
            padding: 0 3rem 0 3rem;
        }

        input {
            border-radius: 2rem;
            padding-left: 1rem;
            height: 7rem;
            font-size: 4rem;
        }
    }

    .btns {
        font-size: 3rem;
        display: flex;
        gap: 3rem;
        justify-content: center;

        .btn {
            font-size: 3rem;
            min-height: 6rem;
        }
    }
}
</style>